<template>
    <div>
        <div class="w-form-header">
            <!-- <span> 创建首办单 </span> -->
            <div>
                <el-button v-if="submitBtn" type="primary" @click="save()"  :disabled=submitBtn2
                    >保存</el-button
                >
                <el-button v-else type="primary" @click="save()"
                    >创建</el-button
                >
            </div>
        </div>
        <div class="gva-form-box">
            <div class="w-form-box">
                <div class="list-header">基础信息</div>
                <el-form
                    :model="formData"
                    ref="elFormRef"
                    label-position="right"
                    :rules="rule"
                    label-width="90px"
                >
                    <el-row>
                        <el-col :span="8">
                            <el-form-item
                                :label="`${il8n('styleNum.label')}:`"
                                prop="styleNum"
                            >
                                <div
                                    style="
                                        display: flex;
                                        justify-content: space-between;
                                        align-items: center;
                                    "
                                >
                                    <el-select
                                        v-model="formData.styleNum"
                                        clearable
                                        filterable
                                        style="
                                            min-width: 150px;
                                            margin-right: 10px;
                                        "
                                        :disabled="true"
                                        @click="openCreateAndEdit"
                                        placeholder="点击查询"
                                        remote
                                        :remote-method="getProductStylesListFn"
                                        @change="getSizesAndDDMS"
                                    >
                                        <el-option
                                            v-for="item in productStylesList"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                    <el-icon @click="openCreateAndEdit"
                                        ><Search
                                    /></el-icon>
                                </div>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item
                                :label="`${il8n('customerDemandDate.label')}:`"
                                prop="customerDemandDate"
                                label-width="120px"
                            >
                                <el-date-picker
                                    :disabled-date="disabledDate"
                                    v-model="formData.customerDemandDate"
                                    type="date"
                                    value-format="YYYY-MM-DDTHH:mm:ssZ"
                                    :placeholder="
                                        il8n('customerDemandDate.placeholder')
                                    "
                                    :clearable="true"
                                ></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item
                                label="生产地点："
                                prop="transferOrder"
                                label-width="100px"
                            >
                                <el-select
                                    v-model="formData.transferOrder"
                                    :clearable="true"
                                >
                                    <el-option
                                        v-for="(item, index) in transferOrder"
                                        :key="index"
                                        :label="item"
                                        :value="item"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                :label="`${il8n('workWithTimePlan.label')}:`"
                                label-width="160px"
                            >
                                <el-radio-group
                                    v-model="formData.workWithTimePlan"
                                >
                                    <el-radio label="是">参与</el-radio>
                                    <el-radio label="否">不参与</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item
                                :label="`办单付数:`"
                                prop="plmOrderNum"
                            >
                                <LTable
                                    v-if="tableData.length <= 0"
                                    :columns="columns"
                                    :tableData="tableData"
                                    :pagination="false"
                                    :selection="false"
                                    :tableProps="{
                                        // showSummary: true,
                                        // summaryMethod: getSumaryMethod
                                    }"
                                    :showConfig="false"
                                    ref="tableRef"
                                    style="
                                        padding: 0px 40px 8px 0px;
                                        width: 100%;
                                    "
                                ></LTable>
                                <LTable
                                    v-else
                                    :columns="columns"
                                    :tableData="tableData"
                                    :pagination="false"
                                    :selection="false"
                                    :tableProps="{
                                        showSummary: true,
                                        summaryMethod: getSumaryMethod,
                                    }"
                                    :showConfig="false"
                                    ref="tableRef"
                                    style="
                                        padding: 0px 40px 8px 0px;
                                        width: 100%;
                                    "
                                >
                                    <template #color="{ row, column }">
                                        <el-input
                                            v-model="row.colorNum[column.prop]"
                                            @input="
                                                validNumber(
                                                    row.colorNum,
                                                    column.prop
                                                )
                                            "
                                        />
                                    </template>
                                    <template #luckTilt="{ row }">
                                        <span
                                            ><el-input-number
                                                :controls="false"
                                                style="
                                                    width: 60px;
                                                    height: 28px;
                                                "
                                                :max="255"
                                                :min="0"
                                                v-model="row.luckTilt"
                                        /></span>
                                    </template>
                                    <template #count="{ row }">
                                        <span>{{ getCount(row) }}</span>
                                    </template>
                                    <template #design="{ row }">
                                        <el-select
                                            v-model="row.drawingList"
                                            :clearable="true"
                                        >
                                            <el-option
                                                v-for="item in row.ddmsDrawingLists"
                                                :key="item.ID"
                                                :label="item.drawingName"
                                                :value="item.fileUrl"
                                            >
                                            <span>{{ item.drawingName }}{{ (item.status==0 ? '(草稿)' : item.status==1?'(完成)' : item.status==2 ? '(审批中)' : '') }}</span>
                                        </el-option>
                                        </el-select>
                                    </template>
                                </LTable>
                            </el-form-item>
                        </el-col>
                        <el-col :span="15">
                            <el-form-item
                                :label="`${il8n('testProjectNote.label')}:`"
                                prop="testProjectNote"
                                label-width="90px"
                            >
                                <el-input
                                    v-model="formData.testProjectNote"
                                    type="textarea"
                                    :autosize="{ minRows: 1 }"
                                    :maxlength="500"
                                    show-word-limit
                                    :placeholder="
                                        il8n('testProjectNote.placeholder')
                                    "
                                    :clearable="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="15">
                            <el-form-item
                                :label="`${il8n('firstOrderNote.label')}:`"
                                prop="firstOrderNote"
                            >
                                <el-input
                                    v-model="formData.firstOrderNote"
                                    type="textarea"
                                    :autosize="{ minRows: 1 }"
                                    :maxlength="500"
                                    show-word-limit
                                    :placeholder="
                                        il8n('firstOrderNote.placeholder')
                                    "
                                    :clearable="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="15" v-if="formData.version >= 1">
                            <el-form-item
                                :label="`修改备注:`"
                                prop="modifyNote"
                            >
                                <el-input
                                    v-model="formData.modifyNote"
                                    type="textarea"
                                    :autosize="{ minRows: 1 }"
                                    :maxlength="500"
                                    show-word-limit
                                    placeholder=""
                                    :clearable="true"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col
                            :span="24"
                            v-if="formData.version && formData.version > 1"
                        >
                            <div>
                                <div class="w-form-box">
                                    <div class="list-header">
                                        与上版本配件对比
                                    </div>
                                </div>
                                <div>
                                    <el-table
                                        :data="[
                                            {
                                                addAccessory:
                                                    addAccessory.join(','),
                                                deleteAccessory:
                                                    deleteAccessory.join(','),
                                            },
                                        ]"
                                        border
                                        style="width: 100%"
                                        class="table-style-1"
                                    >
                                        <el-table-column
                                            label="新增配件"
                                            prop="addAccessory"
                                            min-width="300"
                                        >
                                            <template #default="{ row }">
                                                <div
                                                    v-for="item in addAccessory"
                                                >
                                                    {{ item }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                        <el-table-column
                                            label="删除配件"
                                            prop="deleteAccessory"
                                            min-width="300"
                                        >
                                            <template #default="{ row }">
                                                <div
                                                    v-for="item in deleteAccessory"
                                                >
                                                    {{ item }}
                                                </div>
                                            </template>
                                        </el-table-column>
                                    </el-table>
                                </div>
                                <!-- <div class="version-PK">
                    <el-descriptions title="" :column="1" border>
                        <el-descriptions-item label="新增配件" label-align="center">{{addAccessory.join(',')}}</el-descriptions-item>
                        <el-descriptions-item label="删除配件"  label-class-name="delete-acc" label-align="center">{{deleteAccessory.join(',')}}</el-descriptions-item>
                    </el-descriptions>
                </div> -->
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <styleNumSearch
                v-if="editReasonDialogShow"
                @closeDialog="closeDialog"
                @selectStyleNum="selectStyleNum"
            ></styleNumSearch>
            <!-- <el-row type="flex" justify="center" style="margin-top: 20px">
                <el-button type="primary" @click="save">确认提交</el-button>
                <el-button type="primary" @click="back">返回</el-button>
            </el-row> -->
        </div>
    </div>
</template>

<script setup>
import {
    createFirstOrderProcessing,
    updateFirstOrderProcessing,
    findFirstOrderProcessing,
    versionComparison,
} from "@/api/plmFirstOrderProcessing";
import { getProductSpecSizeList } from "@/api/productSpecSize";
import { getProductStylesList } from "@/api/plmProductStyles";
import { getDdmsSpecDrawingListList } from "@/api/ddmsSpecDrawingList";
import { getProductSpecColorList } from "@/api/productSpecColor";
import { findProductSpec } from "@/api/plmProductSpec";
import { findProductStyles } from "@/api/plmProductStyles";
defineOptions({
    name: "FirstOrderProcessingForm",
});
import { disabledDate } from "../../utils/tool";
import { useRoute, useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ref, toRefs, reactive, onMounted, unref } from "vue";
import { useI18n } from "vue-i18n";
import LTable from "@/components/LTable/LTable.vue";
import { useDict } from "@/utils/dictionary";
import { emitter } from "@/utils/bus.js";
import styleNumSearch from "@/components/styleNumSearch/styleNumSearch.vue";
const dict = ref({});

const { t: il8n } = useI18n();
console.log("add============", il8n("styleNum.label"));
const router = useRouter();
const route = useRoute();
const formData = ref({});

const elFormRef = ref();
const productStylesList = ref([]);
const ddmsDrawingList = ref([]);
const sizes = ref({});
const colorList = ref([]);
const transferOrder = ref([]);

const initColumns = [
    {
        prop: "sizeNum",
        label: "尺码",
        show: true,
        fixedWidth: 100,
        tableColumnProps: {
            fixed: "left",
            sortable: false,
        },
    },
    {
        prop: "luckTilt",
        fixedWidth: 100,
        label: "吉架",
        show: true,
        tableColumnProps: {
            fixed: "right",
            sortable: false,
        },
        slot: "luckTilt",
    },
    {
        prop: "amountTotal",
        fixedWidth: 100,
        label: "总计",
        show: true,
        tableColumnProps: {
            fixed: "right",
            sortable: false,
        },
        slot: "count",
    },
    {
        prop: "design",
        label: "设计规格图",
        width: 200,
        show: true,
        tableColumnProps: {
            fixed: "right",
            sortable: false,
        },
        slot: "design",
    },
];
const columns = ref(initColumns);
const tableData = ref([]);
const submitBtn = ref(false);
const submitBtn2 = ref(false);

// 验证规则
const rule = ref({
    customerDemandDate: [
        { required: true, message: "请选择客户要求完成时间", trigger: "blur" },
    ],
    plmOrderNum: [
        {
            validator: (rule, value, callback) => {
                const tdata = tableData.value;
                // tdata.forEach((vv) => {
                //     let ll = vv.ddmsDrawingLists?.filter(
                //         (val) => val.fileUrl == vv.drawingList
                //     );
                //     if (ll && ll.length > 0) {
                //         vv["drawingName"] = ll[0].drawingName;
                //     }
                // });
                let count = 0;
                tdata.forEach((f) => {
                    const nums = getCount(f);
                    if (nums > 0 && !f.drawingList) {
                        callback(
                            new Error("尺码合计付数大于0，请选择设计规格图")
                        );
                        return;
                    }
                    count += nums;
                });
                if (count <= 0) {
                    callback(new Error("尺码合计付数不能为0"));
                    return;
                }
                callback();
            },
        },
    ],
    // transferOrder: [{ required: true, message: "请选择生产地点", trigger: "blur" }],
    modifyNote: [
        { required: true, message: "请输入修改备注", trigger: "blur" },
    ],
});

onMounted(async () => {
    dict.value = await useDict("gender", "int");
    // 获取产品款式列表
    // getProductStylesListFn();
    const {
        query: { id },
    } = route;
    if (id) {
        submitBtn.value = true;
        getFindFirstOrderProcessingDetail(id);
    }
});

// 保存按钮
const save = async (status) => {
    elFormRef.value?.validate(async (valid) => {
        if (valid) {
            if (formData.value.ID) {
                confirmNoReasonForm();
            } else {
                console.log("tableData====================", tableData.value);
                const tableD = unref(tableData);
                tableD.forEach((vv) => {
                    let ll = vv.ddmsDrawingLists?.filter(
                        (val) => val.fileUrl == vv.drawingList
                    );
                    if (ll && ll.length > 0) {
                        vv["drawingName"] = ll[0].drawingName;
                        vv["ddmsNum"] = ll[0].ddmsNum || '';
                        vv["ddmsNumVersion"] = ll[0].version || '';
                    }else{
                        vv["drawingName"] = '';
                        vv["ddmsNum"] = '';
                        vv["ddmsNumVersion"] = '';
                    }
                });
                let orderAmountSum = 0;
                tableD.forEach((item) => {
                    item.amountTotal = getCount(item) || 0;
                    orderAmountSum += Number(item.amountTotal);
                });
                const params = {
                    ...formData.value,
                    orderAmountSum,
                    sizes: tableD,
                    status: status || undefined,
                };

                const res = await createFirstOrderProcessing(params);
                if (res.code === 0) {
                    ElMessage({
                        type: "success",
                        message: "创建成功",
                    });
                    emitter.emit("closeThisPage", {
                        path: "/layout/firstOrderProcessingEdit",
                        query: { id: res.data, subTitle: res.data },
                    });
                    // back();
                }
            }
        }
    });
};

async function confirmNoReasonForm() {
    const firstorderProcessing = formData.value;
    firstorderProcessing.sizes = tableData.value;
    let orderAmountSum = 0;
    firstorderProcessing.sizes.forEach((item) => {
        item.amountTotal = getCount(item);
        orderAmountSum += Number(item.amountTotal);
        let ll = item.ddmsDrawingLists?.filter(
            (val) => val.fileUrl == item.drawingList
        );
        if (ll && ll.length > 0) {
            item["drawingName"] = ll[0].drawingName;
            item["ddmsNum"] = ll[0].ddmsNum || '';
            item["ddmsNumVersion"] = ll[0].version || '';
        }else{
            item["drawingName"] = '';
            item["ddmsNum"] = '';
            item["ddmsNumVersion"] = '';
        }
    });
    firstorderProcessing.orderAmountSum = orderAmountSum;
    // firstorderProcessing.colors = colorTableData.value;
    // firstorderProcessing.accessorySpecs = sourceAccessorySpecs.value;
    // firstorderProcessing.signs = signTableData.value;
    // firstorderProcessing.notes = historyNoteTableData.value;
    // firstorderProcessing.tests = testStandardDocumentListData.value
    // firstorderProcessing.testProjectNote =
    //     basicForm.value.testProjectNote;
    // firstorderProcessing.firstOrderNote =
    //     basicForm.value.firstOrderNote;
    submitBtn2.value = true
    const params = { ...firstorderProcessing };
    console.log("params=============", params);
    const res = await updateFirstOrderProcessing(params);
    if(res.msg){
        submitBtn2.value = false
    }
    if (res.code === 0) {
        // addNoteForm.value = {};
        // basicForm.value = {};
       
        ElMessage({
            type: "success",
            message: "修改成功",
        });
        setTimeout(() => {
            submitBtn2.value = false
        }, 3000);
        const {
            query: { id },
        } = route;
        emitter.emit("closeThisPage", {
            path: "/layout/firstOrderProcessingEdit",
            query: { id: id, subTitle: id },
        });
        // back();
        // getFindFirstOrderProcessingDetail()
    }
}

// 返回按钮
const back = () => {
    router.push({
        path: "/layout/firstOrderProcessing",
    });
};

function getTransferOrderRange(params) {
    transferOrder.value = params?.transferOrderRange || [];
}

async function getProductStylesListFn(keyword) {
    const res = await getProductStylesList({
        page: 1,
        pageSize: 50,
        // productSpecStatus: "1",  //朱彪让去掉
        status: "1",
        styleNum: keyword,
    });
    if (res.code === 0) {
        productStylesList.value = res.data.list.map((rdlm) => ({
            value: rdlm.styleNum,
            label: rdlm.styleNum,
            transferOrderRange: rdlm.transferOrderRange || [],
        }));
    }
}

function getCount(row) {
    let num = 0;
    for (const key in row.colorNum) {
        num += Number(row.colorNum[key] || 0);
    }
    num += row.luckTilt || 0;
    return num || null;
}

async function getSizesAndDDMS(params) {
    if (!formData.value.styleNum) {
        colorList.value = [];
        tableData.value = [];
        ddmsDrawingList.value = [];
        return;
    }
    // 获取转单范围
    getTransferOrderRange(params);
    getColor(formData.value.styleNum);
}

// 获取颜色
function getColor(styleNum) {
    getProductSpecColorList({ page: 1, pageSize: 999, styleNum }).then(
        async (res) => {
            if (res.code == 0) {
                let colorL = res.data.list;
                const colorRes = await findProductSpec({ styleNum });
                const {
                    reproductSpec: {
                        designSigns: designSigns = [],
                        designColors: designColors = [],
                        designAccessorySpecs: designAccessorySpecs = [],
                    },
                } = colorRes.data;
                if (
                    (designSigns && designSigns.length > 0) ||
                    (designColors && designColors.length > 0) ||
                    (designAccessorySpecs && designAccessorySpecs.length > 0)
                ) {
                    colorL = designColors || [];
                }

                colorList.value = colorL;
                const col = colorL.map((item) => {
                    return {
                        prop: item.colorNum,
                        label: item.colorNum,
                        show: true,
                        fixedWidth: 80,
                        tableColumnProps: {
                            sortable: false,
                        },
                        slot: "color",
                    };
                });
                const newColumns = [...initColumns];
                if (col.length > 0) {
                    newColumns.splice(1, 0, ...col);
                }
                columns.value = newColumns;
                getSizes(styleNum);
            }
        }
    );
}

function getSizes(styleNum) {
    getProductSpecSizeList({ styleNum }).then((res) => {
        if (res.code === 0) {
            const { data } = res;
            let sizeList = data.list || [];
            sizeList.forEach((item) => {
                item.colorNum = {};
                colorList.value.forEach((it) => {
                    item.colorNum[it.colorNum] = null;
                });
            });
            console.log("sizeList====================", sizeList);

            tableData.value = sizeList;
            sizes.value = sizeList;
            tableData.value.map((m, index) => {
                getDDMS(index, formData.value.styleNum, m.sizeNum);
            });
        }
    });
}

function getDDMS(dataIndex, styleNum, sizeNum) {
    getDdmsSpecDrawingListList({ styleNum, sizeNum }).then((res) => {
        if (res.code === 0) {
            const { data } = res;
            // ddmsDrawingList.value = data.list;
            tableData.value[dataIndex].ddmsDrawingLists = data.list;
        }
    });
}

function validNumber(data, type) {
    data[type] = data[type].replace(/[^0-9]/gi, "");
}

async function getFindFirstOrderProcessingDetail(firstOrderNum) {
    const res = await findFirstOrderProcessing({ firstOrderNum });
    if (res.code === 0) {
        const {
            data: {
                refirstOrderProcessing,
                refirstOrderProcessing: {
                    sizes = [],
                    colors = [],
                    accessorySpecs = [],
                    signs = [],
                    notes = [],
                    tests = [],
                    mold_house = [],
                },
            },
        } = res;
        let colorL = colors;
        formData.value = refirstOrderProcessing;
        // transferOrder.value = refirstOrderProcessing.transferOrderRange || []; // 生产地点下拉列表
        findProductStyles({
            styleNum: formData.value.styleNum,
        }).then((res) => {
            transferOrder.value =
                res.data.reproductStyles.transferOrderRange || [];
            // 日期比 2024-07-22前不校验时间
            // const date1 = new Date('2024-07-22');
            // const date2 = new Date(res.data.reproductStyles.CreatedAt);
            // if(date1.getTime() > date2.getTime()){
            //   if(rule.value.transferOrder) delete rule.value.transferOrder
            // }
        });
        const colorRes = await findProductSpec({
            styleNum: formData.value.styleNum,
        });
        const {
            reproductSpec: {
                designSigns: designSigns = [],
                designColors: designColors = [],
                designAccessorySpecs: designAccessorySpecs = [],
            },
        } = colorRes.data;
        let productColors = colorRes.data.reproductSpec.colors
        if (
            (designSigns && designSigns.length > 0) ||
            (designColors && designColors.length > 0) ||
            (designAccessorySpecs && designAccessorySpecs.length > 0)
        ) {
            colorL = designColors || [];
        }else{
            colorL = productColors || [];
        }
        colorList.value = colorL;
        sizes.map(sizesItem=>{
            if(sizesItem.colorNum){
                Object.keys(sizesItem.colorNum).forEach(key=>{
                if(!colorL.some(s=> s.colorNum == key)){
                    delete sizesItem.colorNum[key]
                }
                })
            }
        })
        const col = colorL.map((item) => {
            return {
                prop: item.colorNum,
                label: item.colorNum,
                show: true,
                fixedWidth: 80,
                tableColumnProps: {
                    sortable: false,
                },
                slot: "color",
            };
        });
        const newColumns = [...initColumns];
        if (col.length > 0) {
            newColumns.splice(1, 0, ...col);
        }
        columns.value = newColumns;

        const sizsRes = await getProductSpecSizeList({
            styleNum: formData.value.styleNum,
        });
        const sizeL = compareArray(sizes, sizsRes?.data?.list);
        // 去除旧图
        let index = columns.value.findIndex(item=>{
            return item.prop == 'design'
        })
        let oldName = ''
        if(index!=-1){
            oldName = sizeL.map(sizeItem=>{
                return sizeItem.drawingName || ''
            }).join(';')
            columns.value[index].label = "设计规格图" + `(上次用图:${oldName})`
        }
        sizeL.forEach((item) => {
            if (!item.colorNum) item.colorNum = {};
            item['drawingList'] = ''
            item['drawingName'] = ''
        });

        tableData.value = sizeL;
        tableData.value.map((m, index) => {
            getDDMS(index, formData.value.styleNum, m.sizeNum);
        });
        // 版本不是>1的时候请求版本对比
        if (refirstOrderProcessing.version > 1) {
            getAccessoryData();
        }
    }
}

// 对比2个数组
function compareArray(arr1 = [], arr2 = []) {
    const arr1Map = new Map();
    const newArr = [];
    arr1.map((m) => arr1Map.set(m.sizeNum, m));
    arr2.map((m) => {
        if (arr1Map.has(m.sizeNum)) {
            newArr.push(arr1Map.get(m.sizeNum));
        } else {
            newArr.push(m);
        }
    });
    return newArr;
}

function getSumaryMethod(SummaryMethodProps) {
    const { columns, data = [] } = SummaryMethodProps;
    const sums = [];

    columns.forEach((column, index) => {
        if (column.property === "luckTilt") {
            sums[index] = "合计";
            return;
        }
        const values = data.map((item) => getCount(item));
        if (
            column.property === "amountTotal" &&
            !values.every((value) => Number.isNaN(value))
        ) {
            sums[index] = values.reduce((a, b) => a + b, 0);
        }
    });
    return sums;
}

// 款式查询弹窗
const editReasonDialogShow = ref(false);
// 打开 新增、编辑
const openCreateAndEdit = () => {
    editReasonDialogShow.value = true;
};

// 关闭款式查询弹窗
function closeDialog(params) {
    editReasonDialogShow.value = false;
}

function selectStyleNum(params) {
    formData.value.styleNum = params.styleNum;
    getSizesAndDDMS(params);
    formData.value["transferOrder"] = "";
    editReasonDialogShow.value = false;
}

// 新增与上版本配件对比
const addAccessory = ref([]);
const deleteAccessory = ref([]);
function getAccessoryData(params) {
    const {
        query: { id },
    } = route;
    versionComparison({ firstOrderNum: id }).then((res) => {
        if (res.code == 0) {
            addAccessory.value = [];
            deleteAccessory.value = [];
            if (res.data.Add) {
                res.data.Add.map((item) => {
                    let idx = addAccessory.value.findIndex((p) => {
                        return p == (item.componentNum || '') + (item.colorNum || '')
                    });
                    let p = (item.componentNum || '') + (item.colorNum || '')
                    if (idx == -1 && p) {
                        addAccessory.value.push(p);
                    }
                });
            }
            if (res.data.Decrease) {
                res.data.Decrease.map((item) => {
                    let idx = deleteAccessory.value.findIndex((p) => {
                        return p == (item.componentNum || '') + (item.colorNum || '')
                    });
                    let p = (item.componentNum || '') + (item.colorNum || '')
                    if (idx == -1 && p) {
                        deleteAccessory.value.push(p);
                    }
                });
            }
        }
    });
}
</script>

<style lang="scss" scoped>
@import url("@/style/common/common.scss");
.version-PK {
    :deep(.delete-acc) {
        background: #fd9595 !important;
        color: #000 !important;
    }

    :deep(.el-descriptions__label) {
      width: 10%;
    }
}
:deep(.table-style-1) {
    .el-table__cell {
        vertical-align: top !important;
    }
}
</style>
